<template>
    <view class="app-container personal">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <template #top>
                <zzk-nav title="员工管理"></zzk-nav>
            </template>
            <view class="personal-list">
                <view class="personal-item" v-for="item in list" :key="item.id">
                    <view class="top">
                        <text class="name">{{ item.name }} {{ item.phone }}</text>
                        <text class="txt">身份证号码：{{ item.certNo }}</text>
                        <text class="txt">地址：{{ item.addressDetail }}</text>
                    </view>
                    <view class="bottom flexrow">
                        <!-- <view class="btn">
                            <up-button text="编辑" type="primary" :plain="true" :customStyle="{ margin: 0, width: '160rpx', height: '56rpx' }"></up-button>
                        </view> -->
                        <view class="btn">
                            <up-button text="删除/停用" type="error" :plain="true" :customStyle="{ margin: 0, width: '160rpx', height: '56rpx' }" @click="deleteItem(item)"></up-button>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <zzk-bottom>
            <view class="personal-bottom flexrow">
                <up-button type="primary" text="添加员工" @click="linkto('/pages/user/editpersonal')"></up-button>
            </view>
        </zzk-bottom>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { linkto, showToast } from '@/utils/util'
import { staffList, staffDelete } from '@/api/staff.js'

const paging = ref(null)
const list = ref([])

onShow(() => {
    if (paging.value) {
        paging.value.reload()
    }
})

const queryList = (pageNo, pageSize) => {
    const params = {
        page: pageNo,
        size: pageSize
    }
    staffList(params).then(res => {
        paging.value.complete(res.records)
    })
}

const deleteItem = (item) => {
    uni.showModal({
        title: '提示',
        content: '是否确认删除/停用当前员工?',
        success: res => {
            if (res.confirm) {
                staffDelete(item.id).then(r => {
                    showToast('删除/停用成功')
                    paging.value.reload()
                })
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.personal {
    &-list {
        padding: 20rpx $zzk-margin 0;
    }
    &-item {
        background-color: #fff;
        padding: 32rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        .name {
            font-size: 32rpx;
            line-height: 56rpx;
            color: #333;
            font-weight: 700;
        }
        .txt {
            font-size: 28rpx;
            line-height: 48rpx;
            color: #999;
        }
        .bottom {
            padding-top: 20rpx;
            margin-top: 20rpx;
            justify-content: flex-end;
            border-top: #f5f5f5 1rpx solid;
        }
        .btn {
            margin-left: 20rpx;
        }
    }
    &-bottom {
        flex: 1;
        padding: 0 $zzk-margin;
        align-items: center;
    }
}
</style>